<template>
  <div class="seeting-box flex" ref="settingbox" @mousemove="handleLineMouseMove" @mouseup="handleMouseUp">
    <div class="setting-left" ref="setLeft">
      <div class="title">菜单设置：</div>
      <span class="dot dotleft" v-show="showDot">{{ dotleft }}</span>
      <div class="setting-line" ref="line" @mousedown="handleLineMouseDown" @mouseup="handleMouseUp"></div>
    </div>
    <div class="setting-right" ref="setRight">
      <div class="title">设置：</div>
      <span class="dot dotright" v-show="showDot">{{ dotright }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const mouseFlag = ref(false);
const setLeft = ref(null);
const setRight = ref(null);
const line = ref(null);
const settingbox = ref(null);
const dotleft = ref("");
const dotright = ref("");
const showDot = ref(false);
const handleLineMouseDown = (event: any) => {
  console.log(99)
  const left = event.pageX - settingbox.value?.offsetLeft
  line.value && (line.value.style.left = left + 'px');
  mouseFlag.value = true
}
const handleLineMouseMove = (event: any) => {
  if (mouseFlag.value) {
    const left = event.pageX - settingbox.value?.offsetLeft
    line.value && (line.value.style.left = left + 'px');
    setLeft.value.style.width = left + "px";
    setRight.value.style.width = `calc(100% - ${left}px)`;
    dotleft.value = `width: ${left}px`;
    dotright.value = `width: ${setRight.value.offsetWidth}px`;
    showDot.value = true;
  }
}
const handleMouseUp = () => {
  mouseFlag.value = false;
  setTimeout(() => {
    showDot.value = false;
  }, 500);
}
</script>

<style lang="scss" scoped>
.seeting-box{
  height: 100%;
  .setting-right, .setting-left{
    width: 50%;
    position: relative;
  }
  .setting-right{
    padding-left: 20px;
    box-sizing: border-box;
  }
  .title{
    font-size: 18px;
  }
  .setting-line{
    width: 1px;
    border-radius: 2px;
    height: calc(100% - 24px);
    background-color: #ddd;
    position: absolute;
    cursor: ew-resize;
    right: 0;
    z-index: 999;
  }
  .dot{
    position: absolute;
    color: #666;
    user-select: none;
  }
  .dotleft{
    right: 20px;
  }
  .dotright{
    right: 0;
  }
}
</style>
